<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>像素艺术绘画板</title>
    <!-- 内联 CSS 样式 -->
    <style>
        /* 设置页面字体、背景和布局 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #e6f7ff 0%, #d1e9ff 50%, #f0f9ff 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 应用容器，使用网格布局 */
        .app-container {
            display: grid;
            grid-template-areas:
                "header header header"
                "left-tools canvas right-tools"
                "footer footer footer";
            grid-template-columns: 250px 1fr 250px;
            grid-template-rows: auto 1fr auto;
            gap: 20px;
            padding: 20px;
            width: 100%;
            max-width: 1600px;
            /* 最大宽度限制 */
            margin: 0 auto;
            box-sizing: border-box;
            transition: all 0.3s ease;
            /* 新增缩放控制 */
            transform-origin: top center;
            transform: scale(1);
        }

        /* 动态缩放规则，根据屏幕宽度调整容器缩放比例 */
        @media (max-width: 1400px) {
            .app-container {
                transform: scale(0.9);
            }
        }

        @media (max-width: 1200px) {
            .app-container {
                transform: scale(0.8);
            }
        }

        @media (max-width: 1000px) {
            .app-container {
                transform: scale(0.7);
            }
        }

        @media (max-width: 800px) {
            .app-container {
                transform: scale(0.6);
            }
        }

        /* 鼠标悬停效果 */
        .app-container:hover {
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        /* 标题区样式 */
        header {
            grid-area: header;
            text-align: center;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        /* 标题样式 */
        h1 {
            color: #007bff;
            font-size: 40px;
            margin: 0;
        }

        /* 左侧工具区样式 */
        .left-tools {
            grid-area: left-tools;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* 右侧工具区样式 */
        .right-tools {
            grid-area: right-tools;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* 画布容器样式 */
        .canvas-container {
            grid-area: canvas;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 画布样式 */
        #pixel-canvas {
            border: 3px solid #007bff;
            background-color: #fff;
            cursor: crosshair;
            border-radius: 10px;
            max-width: 100%;
        }

        /* 工具区样式 */
        .tool-section {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        /* 工具区标题样式 */
        .tool-section h3 {
            margin-top: 0;
            color: #555;
            font-size: 24px;
            text-align: center;
        }

        /* 工具按钮样式 */
        .tool-btn {
            width: 100%;
            padding: 12px;
            margin: 5px 0;
            cursor: pointer;
            border: none;
            border-radius: 10px;
            background-color: #007bff;
            color: white;
            font-size: 16px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        /* 工具按钮鼠标悬停效果 */
        .tool-btn:hover {
            background-color: #0056b3;
            transform: scale(1.02);
            box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
        }

        /* 激活工具按钮样式 */
        .active-tool {
            box-shadow: 0 0 0 3px #007bff, inset 0 -3px 0 rgba(0, 0, 0, 0.3);
            font-weight: bold;
            background-color: #0056b3;
        }

        /* 颜色设置区样式 */
        .color-section {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        /* 工具区和颜色设置区鼠标悬停效果 */
        .tool-section:hover,
        .color-section:hover {
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
            transform: translateY(-5px);
        }

        /* 颜色设置区标题样式 */
        .color-section h3 {
            margin-top: 0;
            color: #555;
            font-size: 24px;
            text-align: center;
        }

        /* 颜色控制区样式 */
        .color-controls {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /* 颜色行样式 */
        .color-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* 颜色行标签样式 */
        .color-row label {
            font-weight: bold;
        }

        /* 颜色选择器样式 */
        #color-picker {
            width: 50px;
            height: 50px;
            cursor: pointer;
            border: 3px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        /* 当前颜色显示区样式 */
        #current-color-display {
            width: 50px;
            height: 50px;
            border: 3px solid #000;
            border-radius: 10px;
        }

        /* 颜色混合器样式 */
        .color-mixer {
            margin-top: 15px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 10px;
        }

        /* 颜色混合器标题样式 */
        .color-mixer h4 {
            margin-top: 0;
            text-align: center;
        }

        /* 颜色混合器控制区样式 */
        .color-mixer-controls {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* 混合器行样式 */
        .mixer-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* 混合器颜色选择器样式 */
        .mixer-color-picker {
            width: 50px;
            height: 50px;
            cursor: pointer;
            border: 3px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        /* 颜色选择器和混合器颜色选择器鼠标悬停效果 */
        #color-picker:hover,
        .mixer-color-picker:hover {
            border-color: #007bff;
            transform: scale(1.05);
        }

        /* 操作按钮区样式 */
        .action-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* 操作按钮样式 */
        .action-btn {
            width: 100%;
            padding: 12px;
            margin: 5px 0;
            cursor: pointer;
            border: none;
            border-radius: 10px;
            background-color: #00e1ff;
            color: white;
            font-size: 16px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        /* 操作按钮鼠标悬停效果 */
        .action-btn:hover {
            background-color: #0056b3;
            transform: scale(1.02);
            box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
        }

        /* 模板预览样式 */
        .template-preview {
            display: inline-block;
            margin: 10px;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 15px;
            cursor: pointer;
            transition: transform 0.3s;
        }

        /* 模板预览鼠标悬停效果 */
        .template-preview:hover {
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        /* 模板预览画布样式 */
        .template-preview canvas {
            display: block;
            margin-bottom: 8px;
            border: 2px solid #eee;
            border-radius: 10px;
        }

        /* 页脚样式 */
        footer {
            grid-area: footer;
            text-align: center;
            padding: 15px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        /* 淡入动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 淡出动画 */
        @keyframes fadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        /* 通知样式 */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #4cd137;
            color: white;
            padding: 15px 25px;
            border-radius: 5px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
            z-index: 100;
            animation: fadeIn 0.3s ease, slideIn 0.3s ease;
            font-size: 16px;
        }

        /* 错误通知样式 */
        .notification.error {
            background: #ff6b6b;
        }

        /* 自定义尺寸输入框样式 */
        #custom-size-container input {
            width: 60px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        /* 背景颜色容器样式 */
        #bg-color-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* 小屏幕时改为垂直布局（避免缩放过小） */
        @media (max-width: 700px) {
            .app-container {
                transform: none;
                grid-template-areas:
                    "header"
                    "left-tools"
                    "canvas"
                    "right-tools"
                    "footer";
                grid-template-columns: 1fr;
                padding: 10px;
            }

            .left-tools,
            .right-tools {
                width: 100% !important;
            }
        }

        /* 确保所有元素继承缩放 */
        .app-container * {
            transform-origin: inherit;
        }
    </style>
</head>

<body>
    <!-- 应用容器，使用网格布局 -->
    <div class="app-container">
        <header>
            <h1>像素艺术绘画板</h1>
        </header>
        <!-- 左侧工具区 -->
        <div class="left-tools">
            <!-- 画布设置区域 -->
            <div class="tool-section">
                <h3>画布设置</h3>
                <label for="preset-size">预设尺寸:</label>
                <!-- 预设尺寸选择框 -->
                <select id="preset-size" class="tool-btn">
                    <option value="16">16x16</option>
                    <option value="32">32x32</option>
                    <option value="64">64x64</option>
                    <option value="128">128x128</option>
                    <option value="900" selected>900x700 (默认)</option>
                    <option value="custom">自定义</option>
                </select>
                <!-- 自定义尺寸输入框，默认隐藏 -->
                <div id="custom-size-container" style="display:none; margin-top:10px;">
                    <label for="custom-width">宽度:</label>
                    <input type="number" id="custom-width" min="8" max="512" value="32"><br><br>
                    <label for="custom-width">高度:</label>
                    <input type="number" id="custom-height" min="8" max="512" value="32">
                    <button class="action-btn" onclick="applyCustomSize()" style="margin-top:5px;">应用</button>
                </div>
                <!-- 背景类型选择框 -->
                <label for="bg-type" style="margin-top:10px;">背景类型:</label>
                <select id="bg-type" class="tool-btn">
                    <option value="grid">网格</option>
                    <option value="color">纯色</option>
                    <option value="transparent">透明</option>
                </select>
                <!-- 背景颜色选择器，默认隐藏 -->
                <div id="bg-color-container" style="display:none; margin-top:10px;">
                    <label for="bg-color-picker">背景色:</label>
                    <input type="color" id="bg-color-picker" value="#ffffff">
                </div>
            </div>
            <!-- 绘图工具区域 -->
            <div class="tool-section">
                <h3>绘图工具</h3>
                <button class="tool-btn active-tool" id="tool-square">方形 🟩</button>
                <button class="tool-btn" id="tool-circle">圆形 ⭕</button>
                <button class="tool-btn" id="tool-spray">喷枪 🎨</button>
                <button class="tool-btn" id="tool-eraser">橡皮擦 🗑️</button>
                <button class="tool-btn" id="tool-line">直线 📏</button>
                <button class="tool-btn" id="tool-polygon">多边形 🔺</button>
                <label for="brush-size">笔刷大小:</label>
                <input type="range" id="brush-size" min="1" max="10" value="1">
            </div>
        </div>
        <!-- 画布容器 -->
        <div class="canvas-container">
            <!-- 画布元素 -->
            <canvas id="pixel-canvas" width="900" height="700"></canvas>
        </div>
        <!-- 右侧工具区 -->
        <div class="right-tools">
            <div class="color-section">
                <h3>颜色设置</h3>
                <!-- 颜色选择器 -->
                <div class="color-controls">
                    <div class="color-row">
                        <label for="color-picker">选择颜色:</label>
                        <input type="color" id="color-picker" value="#000000">
                    </div>
                    <!-- 当前颜色显示区域 -->
                    <div class="color-row">
                        <span>当前颜色:</span>
                        <div id="current-color-display" style="background: #000000;"></div>
                    </div>
                </div>
                <!-- 颜色混合器 -->
                <div class="color-mixer">
                    <h4>颜色混合器</h4>
                    <div class="color-mixer-controls">
                        <div class="mixer-row">
                            <span>颜色1:</span>
                            <input type="color" id="color1-picker" value="#ff0000" class="mixer-color-picker">
                        </div>
                        <div class="mixer-row">
                            <span>颜色2:</span>
                            <input type="color" id="color2-picker" value="#0000ff" class="mixer-color-picker">
                        </div>
                        <!-- 混合颜色按钮 -->
                        <button class="action-btn" onclick="mixColors()">混合颜色</button>
                        <!-- 混合颜色显示区域 -->
                        <div class="mixer-row">
                            <span>混合结果:</span>
                            <div id="mixed-color-display"
                                style="width: 40px; height: 40px; background: #800080; border: 2px solid #000; border-radius: 8px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 操作按钮区域 -->
            <div class="action-buttons">
                <button class="action-btn" onclick="saveCanvas()">保存作品</button>
                <button class="action-btn" onclick="clearCanvas()">清空画布</button>
                <button class="action-btn" onclick="loadTemplate()">加载模板</button>
                <button class="action-btn" onclick="undo()">撤销</button>
                <button class="action-btn" onclick="redo()">重做</button>
            </div>
        </div>
        <!-- 页脚 -->
        <footer>
            <p>像素艺术绘画板 &copy; liuxiaoqiong</p>
        </footer>
    </div>

    <script>
        // 初始化参数
        // 获取画布元素
        const canvas = document.getElementById('pixel-canvas');
        const ctx = canvas.getContext('2d');
        let currentTool = 'square'; // 当前工具（square/circle/spray/eraser/line/polygon）
        let currentColor = '#000000'; // 当前颜色
        let isDrawing = false; // 是否正在绘制，初始为 false
        let isPlacingTemplate = false; // 是否正在放置模板
        let selectedTemplate = null;// 模板数组，包含多个预设模板
        const templates = [
            {
                name: '笑脸',
                data: [
                    [0, 0, 1, 1, 1, 1, 0, 0],
                    [0, 1, 0, 0, 0, 0, 1, 0],
                    [1, 0, 1, 0, 0, 1, 0, 1],
                    [1, 0, 0, 0, 0, 0, 0, 1],
                    [1, 0, 1, 0, 0, 1, 0, 1],
                    [1, 0, 0, 1, 1, 0, 0, 1],
                    [0, 1, 0, 0, 0, 0, 1, 0],
                    [0, 0, 1, 1, 1, 1, 0, 0]
                ],
                color: '#FFD700'
            },
            {
                name: '圣诞树',
                data: [
                    [0, 0, 0, 1, 0, 0, 0],
                    [0, 0, 1, 1, 1, 0, 0],
                    [0, 1, 1, 1, 1, 1, 0],
                    [1, 1, 1, 1, 1, 1, 1],
                    [0, 0, 1, 1, 1, 0, 0],
                    [0, 0, 1, 1, 1, 0, 0],
                    [0, 0, 1, 1, 1, 0, 0],
                    [0, 0, 0, 1, 0, 0, 0],
                    [0, 0, 0, 1, 0, 0, 0],
                    [0, 0, 0, 1, 0, 0, 0],
                    [0, 0, 1, 1, 1, 0, 0]
                ],
                color: '#228B22'
            },
            {
                name: '房子',
                data: [
                    [0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
                    [0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
                    [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                    [1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
                    [1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
                    [1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
                    [1, 1, 1, 0, 0, 1, 0, 1, 1, 1],
                    [1, 1, 1, 0, 0, 1, 0, 1, 1, 1],
                    [1, 1, 1, 0, 0, 1, 0, 1, 1, 1]
                ],
                color: '#B87333'
            },
            {
                name: '猫咪',
                data: [
                    [0, 0, 0, 1, 1, 0, 0, 0],
                    [0, 0, 1, 1, 1, 1, 0, 0],
                    [0, 1, 1, 0, 0, 1, 1, 0],
                    [1, 1, 1, 1, 1, 1, 1, 1],
                    [1, 0, 1, 1, 1, 1, 0, 1],
                    [1, 1, 1, 1, 1, 1, 1, 1],
                    [0, 1, 0, 1, 1, 0, 1, 0],
                    [0, 0, 1, 0, 0, 1, 0, 0]
                ],
                color: '#FFA500'
            },
            {
                name: '狗狗',
                data: [
                    [0, 0, 1, 1, 1, 1, 0, 0],
                    [0, 1, 1, 1, 1, 1, 1, 0],
                    [1, 1, 0, 1, 1, 0, 1, 1],
                    [1, 1, 1, 1, 1, 1, 1, 1],
                    [1, 1, 1, 1, 1, 1, 1, 1],
                    [1, 1, 0, 0, 0, 0, 1, 1],
                    [0, 1, 1, 1, 1, 1, 1, 0],
                    [0, 0, 1, 0, 0, 1, 0, 0]
                ],
                color: '#A0522D'
            },
            {
                name: '星星',
                data: [
                    [0, 0, 0, 1, 0, 1, 0, 0, 0],
                    [0, 0, 1, 1, 1, 1, 1, 0, 0],
                    [0, 1, 1, 0, 1, 0, 1, 1, 0],
                    [1, 1, 0, 0, 1, 0, 0, 1, 1],
                    [0, 0, 0, 1, 1, 1, 0, 0, 0],
                    [1, 1, 0, 0, 1, 0, 0, 1, 1],
                    [0, 1, 1, 0, 1, 0, 1, 1, 0],
                    [0, 0, 1, 1, 1, 1, 1, 0, 0],
                    [0, 0, 0, 1, 0, 1, 0, 0, 0]
                ],
                color: '#FFD700'
            },
            {
                name: '花朵',
                data: [
                    [0, 0, 1, 1, 1, 1, 0, 0],
                    [0, 1, 1, 1, 1, 1, 1, 0],
                    [1, 1, 1, 0, 0, 1, 1, 1],
                    [1, 1, 0, 0, 0, 0, 1, 1],
                    [1, 1, 0, 0, 0, 0, 1, 1],
                    [1, 1, 1, 0, 0, 1, 1, 1],
                    [0, 1, 1, 1, 1, 1, 1, 0],
                    [0, 0, 1, 0, 0, 1, 0, 0],
                    [0, 0, 1, 0, 0, 1, 0, 0],
                    [0, 0, 1, 0, 0, 1, 0, 0],
                    [0, 0, 1, 1, 1, 1, 0, 0]
                ],
                color: '#FF69B4'
            },
            {
                name: '太阳',
                data: [
                    [0, 0, 0, 1, 1, 1, 0, 0, 0],
                    [0, 0, 0, 1, 1, 1, 0, 0, 0],
                    [0, 0, 0, 1, 1, 1, 0, 0, 0],
                    [1, 1, 1, 1, 1, 1, 1, 1, 1],
                    [1, 1, 1, 1, 1, 1, 1, 1, 1],
                    [1, 1, 1, 1, 1, 1, 1, 1, 1],
                    [0, 0, 0, 1, 1, 1, 0, 0, 0],
                    [0, 0, 0, 1, 1, 1, 0, 0, 0],
                    [0, 0, 0, 1, 1, 1, 0, 0, 0]
                ],
                color: '#FFA500'
            },
            {
                name: '火箭',
                data: [
                    [0, 0, 0, 1, 1, 1, 0, 0, 0],
                    [0, 0, 1, 1, 1, 1, 1, 0, 0],
                    [0, 1, 1, 1, 1, 1, 1, 1, 0],
                    [1, 1, 1, 0, 1, 0, 1, 1, 1],
                    [1, 1, 1, 0, 1, 0, 1, 1, 1],
                    [1, 1, 1, 1, 1, 1, 1, 1, 1],
                    [0, 0, 1, 1, 0, 1, 1, 0, 0],
                    [0, 0, 0, 1, 1, 1, 0, 0, 0],
                    [0, 0, 0, 1, 1, 1, 0, 0, 0],
                    [0, 0, 0, 1, 1, 1, 0, 0, 0]
                ],
                color: '#DC143C'
            },
            {
                name: '汽车',
                data: [
                    [0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
                    [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                    [1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
                    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                    [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                    [0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
                    [0, 0, 1, 1, 0, 0, 1, 1, 0, 0]
                ],
                color: '#4169E1'
            },
            // 新增模板
            {
                name: '爱心',
                data: [
                    [0, 1, 1, 0, 0, 1, 1, 0],
                    [1, 1, 1, 1, 1, 1, 1, 1],
                    [1, 1, 1, 1, 1, 1, 1, 1],
                    [0, 1, 1, 1, 1, 1, 1, 0],
                    [0, 0, 1, 1, 1, 1, 0, 0],
                    [0, 0, 0, 1, 1, 0, 0, 0],
                    [0, 0, 0, 0, 0, 0, 0, 0]
                ],
                color: '#FF1493'
            },
            {
                name: '蝴蝶',
                data: [
                    [0, 0, 1, 0, 0, 0, 1, 0],
                    [0, 1, 1, 1, 0, 1, 1, 0],
                    [1, 1, 0, 1, 1, 1, 0, 1],
                    [1, 0, 0, 0, 1, 0, 0, 1],
                    [1, 0, 0, 0, 1, 0, 0, 1],
                    [0, 1, 0, 0, 0, 0, 1, 0],
                    [0, 0, 1, 0, 0, 1, 0, 0]
                ],
                color: '#8A2BE2'
            },
            {
                name: '云朵',
                data: [
                    [0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
                    [0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
                    [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
                    [1, 1, 1, 1, 0, 0, 1, 1, 1, 1],
                    [1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
                    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                    [0, 1, 1, 1, 1, 1, 1, 1, 1, 0]
                ],
                color: '#E0FFFF'
            }
        ];
        // 获取笔刷大小输入框元素
        const brushSizeInput = document.getElementById('brush-size');
        let brushSize = 1;// 笔刷大小，初始为 1
        let undoStack = [];// 撤销栈，用于保存历史操作
        let initialState;// 初始画布状态

        // 画布设置变量
        // 画布背景设置，包括类型和颜色
        let canvasBackground = {
            type: "grid", //背景类型，可选值: grid/color/transparent
            color: "#ffffff"// 背景颜色，初始为白色
        };
        // 监听笔刷大小输入框的输入事件
        brushSizeInput.addEventListener('input', (e) => {
            brushSize = parseInt(e.target.value);
        });

        // 画布初始化
        function initCanvas() {
            const pixelSize = 10; // 每个像素的大小
            ctx.scale(pixelSize, pixelSize); // 缩放画布
            drawGrid(); // 绘制网格
            initialState = canvas.toDataURL();// 保存初始画布状态

            // 画布设置事件监听
            // 监听预设尺寸选择框的变化事件
            document.getElementById('preset-size').addEventListener('change', function () {
                const size = this.value;// 获取选择的尺寸值
                if (size === 'custom') {
                    // 如果选择自定义尺寸，显示自定义尺寸输入框
                    document.getElementById('custom-size-container').style.display = 'block';
                } else if (size === '900') {
                    // 如果选择 900x700，调整画布大小为 90x70（保持原始比例）
                    resizeCanvas(90, 70);
                } else {
                    // 否则，调整画布大小为选择的尺寸
                    resizeCanvas(parseInt(size), parseInt(size));
                    // 隐藏自定义尺寸输入框
                    document.getElementById('custom-size-container').style.display = 'none';
                }
            });
            // 监听背景类型选择框的变化事件
            document.getElementById('bg-type').addEventListener('change', function () {
                changeBackgroundType();// 调用改变背景类型的函数
            });
            // 监听背景颜色选择器的输入事件
            document.getElementById('bg-color-picker').addEventListener('input', function () {
                canvasBackground.color = this.value;// 更新画布背景颜色
                if (canvasBackground.type === 'color') {
                    // 如果背景类型为纯色，重绘画布
                    redrawCanvas();
                }
            });
        }

        // 绘制网格
        function drawGrid() {
            ctx.strokeStyle = '#ddd'; // 设置网格线颜色
            ctx.lineWidth = 0.1;// 设置网格线宽度
            const cols = canvas.width / 10; // 计算画布的列数
            const rows = canvas.height / 10;// 计算画布的行数

            // 先填充白色背景
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, cols, rows);

            // 绘制垂直网格线
            for (let x = 0; x <= cols; x++) {
                ctx.beginPath();
                ctx.moveTo(x, 0);
                ctx.lineTo(x, rows);
                ctx.stroke();
            }
            // 绘制水平网格线
            for (let y = 0; y <= rows; y++) {
                ctx.beginPath();
                ctx.moveTo(0, y);
                ctx.lineTo(cols, y);
                ctx.stroke();
            }
        }
        // 新增：改变背景类型函数
        function changeBackgroundType() {
            // 获取选择的背景类型
            const type = document.getElementById('bg-type').value;
            canvasBackground.type = type;// 更新画布背景类型

            if (type === 'color') {
                // 如果选择纯色背景，显示背景颜色选择器
                document.getElementById('bg-color-container').style.display = 'flex';
                // 更新画布背景颜色
                canvasBackground.color = document.getElementById('bg-color-picker').value;
            } else {
                // 否则，隐藏背景颜色选择器
                document.getElementById('bg-color-container').style.display = 'none';
            }

            redrawCanvas();// 重绘画布
        }

        // 应用自定义尺寸
        function applyCustomSize() {
            // 获取自定义宽度输入框的值
            const width = parseInt(document.getElementById('custom-width').value);
            // 获取自定义高度输入框的值
            const height = parseInt(document.getElementById('custom-height').value);
            if (width < 8 || width > 512 || height < 8 || height > 512) {
                // 如果尺寸不在 8-512 范围内，显示错误通知
                showNotification('尺寸必须在8-512之间', true);
                return;
            }
            resizeCanvas(width, height);// 调整画布大小
        }

        // 调整画布尺寸
        function resizeCanvas(width, height) {
            // 保存当前画布状态
            const tempCanvas = document.createElement('canvas');
            tempCanvas.width = canvas.width;
            tempCanvas.height = canvas.height;
            const tempCtx = tempCanvas.getContext('2d');
            tempCtx.drawImage(canvas, 0, 0);

            // 调整物理尺寸（保持10x10像素比例）
            canvas.width = width * 10;
            canvas.height = height * 10;

            // 重置缩放
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.scale(10, 10);

            // 重绘背景
            redrawCanvas();

            // 恢复内容（按比例缩放）
            if (tempCanvas.width > 0) {
                const scaleX = width / (tempCanvas.width / 10);
                const scaleY = height / (tempCanvas.height / 10);
                ctx.drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height,
                    0, 0, width, height);
            }
            // 显示通知，提示画布已调整
            showNotification(`画布已调整为 ${width}x${height}`);
        }

        // 重绘画布（包括背景）
        function redrawCanvas() {
            // 清除画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制背景
            if (canvasBackground.type === 'grid') {
                // 如果背景类型为网格，绘制网格
                drawGrid();
            } else if (canvasBackground.type === 'color') {
                // 如果背景类型为纯色，填充背景颜色
                ctx.fillStyle = canvasBackground.color;
                ctx.fillRect(0, 0, canvas.width / 10, canvas.height / 10);
                ctx.strokeStyle = '#ddd';// 设置网格线颜色
                ctx.lineWidth = 0.1;// 设置网格线宽度
                // 即使纯色背景也绘制边界网格
                for (let x = 0; x <= canvas.width / 10; x++) {
                    ctx.beginPath();
                    ctx.moveTo(x, 0);
                    ctx.lineTo(x, canvas.height / 10);
                    ctx.stroke();
                }
                for (let y = 0; y <= canvas.height / 10; y++) {
                    ctx.beginPath();
                    ctx.moveTo(0, y);
                    ctx.lineTo(canvas.width / 10, y);
                    ctx.stroke();
                }
            }
            // 透明背景不需要额外处理
        }

        // 工具切换逻辑
        // 监听方形工具按钮的点击事件
        document.getElementById('tool-square').addEventListener('click', () => {
            currentTool = 'square';// 更新当前工具为方形
            highlightActiveTool('tool-square'); // 高亮显示方形工具按钮
        });
        // 监听圆形工具按钮的点击事件
        document.getElementById('tool-circle').addEventListener('click', () => {
            currentTool = 'circle';// 更新当前工具为圆形
            highlightActiveTool('tool-circle');// 高亮显示圆形工具按钮
        });
        // 监听喷枪工具按钮的点击事件
        document.getElementById('tool-spray').addEventListener('click', () => {
            currentTool = 'spray';// 更新当前工具为喷枪
            highlightActiveTool('tool-spray');// 高亮显示喷枪工具按钮
        });
        // 监听橡皮擦工具按钮的点击事件
        document.getElementById('tool-eraser').addEventListener('click', () => {
            currentTool = 'eraser';// 更新当前工具为橡皮擦
            highlightActiveTool('tool-eraser'); // 高亮显示橡皮擦工具按钮
        });
        // 监听直线工具按钮的点击事件
        document.getElementById('tool-line').addEventListener('click', () => {
            currentTool = 'line';// 更新当前工具为直线
            highlightActiveTool('tool-line');// 高亮显示直线工具按钮
        });
        // 监听多边形工具按钮的点击事件
        document.getElementById('tool-polygon').addEventListener('click', () => {
            currentTool = 'polygon';// 更新当前工具为多边形
            highlightActiveTool('tool-polygon');// 高亮显示多边形工具按钮
        });

        // 高亮显示当前激活的工具
        function highlightActiveTool(toolId) {
            // 移除所有工具按钮的激活样式
            document.querySelectorAll('.tool-btn').forEach(btn => {
                btn.classList.remove('active-tool');
            });
            // 为指定工具按钮添加激活样式
            document.getElementById(toolId).classList.add('active-tool');
        }

        // 颜色选择逻辑
        // 监听颜色选择器的输入事件
        document.getElementById('color-picker').addEventListener('input', (e) => {
            currentColor = e.target.value;// 更新当前颜色
            updateCurrentColorUI();// 更新当前颜色显示区的背景颜色
        });

        // 更新当前颜色显示
        function updateCurrentColorUI() {
            // 设置当前颜色显示区的背景颜色为当前颜色
            document.getElementById('current-color-display').style.backgroundColor = currentColor;
        }

        // 颜色混合功能
        function mixColors() {
            // 获取颜色 1 选择器的值
            const color1 = document.getElementById('color1-picker').value;
            // 获取颜色 2 选择器的值
            const color2 = document.getElementById('color2-picker').value;

            // 计算混合颜色（简单平均）
            const rgb1 = hexToRgb(color1);
            const rgb2 = hexToRgb(color2);

            const mixed = {
                r: Math.floor((rgb1.r + rgb2.r) / 2),
                g: Math.floor((rgb1.g + rgb2.g) / 2),
                b: Math.floor((rgb1.b + rgb2.b) / 2)
            };
            // 更新当前颜色为混合颜色
            currentColor = rgbToHex(mixed.r, mixed.g, mixed.b);
            updateCurrentColorUI(); // 更新当前颜色显示区的背景颜色
            // 更新颜色选择器的值为混合颜色
            document.getElementById('color-picker').value = currentColor;

            // 更新混合颜色显示
            document.getElementById('mixed-color-display').style.backgroundColor = currentColor;
        }

        // 将十六进制颜色转换为RGB对象
        function hexToRgb(hex) {
            // 去掉#号
            hex = hex.replace('#', '');

            // 解析RGB值
            const r = parseInt(hex.substring(0, 2), 16);
            const g = parseInt(hex.substring(2, 4), 16);
            const b = parseInt(hex.substring(4, 6), 16);

            return { r, g, b };
        }

        // 将RGB值转换为十六进制
        function rgbToHex(r, g, b) {
            return '#' + [r, g, b].map(x => {
                const hex = x.toString(16);
                return hex.length === 1 ? '0' + hex : hex;
            }).join('');
        }
        // 绘制像素函数
        function drawPixel(x, y) {
            // 确保坐标在画布范围内
            if (x < 0 || y < 0 || x >= canvas.width / 10 || y >= canvas.height / 10) return;

            // 设置颜色（橡皮擦特殊处理）
            if (currentTool === 'eraser') {
                // 如果当前工具为橡皮擦，根据背景类型设置填充颜色
                ctx.fillStyle = '#ffffff'; // 默认值，下面会根据背景类型覆盖
            } else {
                ctx.fillStyle = currentColor; // 其他工具使用当前颜色
            }

            const actions = [];

            switch (currentTool) {
                case 'square':// 方形工具绘制逻辑
                    for (let i = -Math.floor(brushSize / 2); i <= Math.floor(brushSize / 2); i++) {
                        for (let j = -Math.floor(brushSize / 2); j <= Math.floor(brushSize / 2); j++) {
                            const px = x + i;
                            const py = y + j;
                            if (px >= 0 && px < canvas.width / 10 && py >= 0 && py < canvas.height / 10) {
                                ctx.fillRect(px, py, 1, 1);
                                ctx.strokeStyle = '#ddd';
                                ctx.lineWidth = 0.1;
                                ctx.strokeRect(px, py, 1, 1);
                                actions.push({ type: 'square', x: px, y: py, color: ctx.fillStyle });
                            }
                        }
                    }
                    break;

                case 'circle':// 圆形工具绘制逻辑
                    for (let i = -Math.floor(brushSize / 2); i <= Math.floor(brushSize / 2); i++) {
                        for (let j = -Math.floor(brushSize / 2); j <= Math.floor(brushSize / 2); j++) {
                            const px = x + i;
                            const py = y + j;
                            if (px >= 0 && px < canvas.width / 10 && py >= 0 && py < canvas.height / 10) {
                                const distance = Math.sqrt((i * i) + (j * j));
                                if (distance <= brushSize / 2) {
                                    ctx.beginPath();
                                    ctx.arc(px + 0.5, py + 0.5, 0.5, 0, Math.PI * 2);
                                    ctx.fill();
                                    ctx.strokeStyle = '#ddd';
                                    ctx.lineWidth = 0.1;
                                    ctx.strokeRect(px, py, 1, 1);
                                    actions.push({ type: 'circle', x: px, y: py, color: ctx.fillStyle });
                                }
                            }
                        }
                    }
                    break;

                case 'spray':// 喷枪工具绘制逻辑
                    // 喷枪效果：随机扩散像素点
                    const intensity = 15; // 喷枪强度
                    for (let i = 0; i < intensity; i++) {
                        const dx = (Math.random() - 0.5) * brushSize;
                        const dy = (Math.random() - 0.5) * brushSize;
                        const px = x + dx;
                        const py = y + dy;
                        if (px >= 0 && px < canvas.width / 10 && py >= 0 && py < canvas.height / 10) {
                            ctx.fillRect(px, py, 0.3, 0.3);
                            ctx.strokeStyle = '#ddd';
                            ctx.lineWidth = 0.1;
                            ctx.strokeRect(px, py, 0.3, 0.3);
                            actions.push({ type: 'spray', x: px, y: py, color: ctx.fillStyle });
                        }
                    }
                    break;

                case 'eraser':// 橡皮擦工具绘制逻辑
                    const eraserMultiplier = 2; // 增大擦除范围的倍数
                    for (let i = -Math.floor(brushSize * eraserMultiplier / 2); i <= Math.floor(brushSize * eraserMultiplier / 2); i++) {
                        for (let j = -Math.floor(brushSize * eraserMultiplier / 2); j <= Math.floor(brushSize * eraserMultiplier / 2); j++) {
                            const px = x + i;
                            const py = y + j;
                            if (px >= 0 && px < canvas.width / 10 && py >= 0 && py < canvas.height / 10) {
                                // 根据背景类型决定擦除方式
                                if (canvasBackground.type === 'transparent') {
                                    ctx.clearRect(px, py, 1, 1); // 透明背景直接清除
                                } else if (canvasBackground.type === 'color') {
                                    ctx.fillStyle = canvasBackground.color; // 使用背景色填充
                                    ctx.fillRect(px, py, 1, 1);
                                    ctx.strokeStyle = '#ddd';
                                    ctx.lineWidth = 0.1;
                                    ctx.strokeRect(px, py, 1, 1);
                                } else { // 网格背景
                                    ctx.fillStyle = '#ffffff'; // 默认白色
                                    ctx.fillRect(px, py, 1, 1);
                                    ctx.strokeStyle = '#ddd';
                                    ctx.lineWidth = 0.1;
                                    ctx.strokeRect(px, py, 1, 1);
                                }
                                actions.push({
                                    type: 'eraser',
                                    x: px,
                                    y: py,
                                    bgType: canvasBackground.type,
                                    bgColor: canvasBackground.color
                                });
                            }
                        }
                    }
                    break;

                case 'line':
                    // 直线工具逻辑
                    if (isDrawing) {
                        const startPos = getMousePos(startEvent);
                        const endPos = { x, y };
                        drawLine(startPos, endPos);
                        actions.push({ type: 'line', start: startPos, end: endPos, color: currentColor });
                    }
                    break;

                case 'polygon':
                    // 多边形工具逻辑
                    if (isDrawing) {
                        polygonPoints.push({ x, y });
                        drawPolygon(polygonPoints);
                        actions.push({ type: 'polygon', points: [...polygonPoints], color: currentColor });
                    }
                    break;
            }

            if (actions.length > 0) {
                undoStack.push(actions);// 将操作记录添加到撤销栈
            }
        }

        // 绘制直线
        function drawLine(start, end) {
            ctx.beginPath();
            ctx.moveTo(start.x + 0.5, start.y + 0.5);
            ctx.lineTo(end.x + 0.5, end.y + 0.5);
            ctx.strokeStyle = currentColor;
            ctx.lineWidth = 0.1;
            ctx.stroke();
        }

        // 绘制多边形
        let polygonPoints = [];
        function drawPolygon(points) {
            if (points.length < 2) return;
            ctx.beginPath();
            ctx.moveTo(points[0].x + 0.5, points[0].y + 0.5);
            for (let i = 1; i < points.length; i++) {
                ctx.lineTo(points[i].x + 0.5, points[i].y + 0.5);
            }
            ctx.closePath();
            ctx.fillStyle = currentColor;
            ctx.fill();
        }

        // 鼠标事件处理
        let startEvent;
        canvas.addEventListener('mousedown', (e) => {
            if (isPlacingTemplate && selectedTemplate) {
                placeTemplate(e);
                return;
            }

            isDrawing = true;
            startEvent = e;
            const pos = getMousePos(e);
            if (currentTool === 'polygon') {
                polygonPoints = [pos];
            }
            drawPixel(pos.x, pos.y);
        });

        canvas.addEventListener('mousemove', (e) => {
            if (!isDrawing) {
                // 预览模板放置位置
                if (isPlacingTemplate && selectedTemplate) {
                    previewTemplate(e);
                }
                return;
            }

            const pos = getMousePos(e);
            drawPixel(pos.x, pos.y);
        });

        canvas.addEventListener('mouseup', () => {
            isDrawing = false;
        });

        canvas.addEventListener('mouseleave', () => {
            isDrawing = false;
        });

        // 获取鼠标位置（转换为画布坐标）
        function getMousePos(e) {
            const rect = canvas.getBoundingClientRect();
            return {
                x: Math.floor((e.clientX - rect.left) / 10),
                y: Math.floor((e.clientY - rect.top) / 10)
            };
        }

        // 保存画布为PNG
        function saveCanvas() {
            try {
                // 临时移除网格线
                const tempCanvas = document.createElement('canvas');
                tempCanvas.width = canvas.width;
                tempCanvas.height = canvas.height;
                const tempCtx = tempCanvas.getContext('2d');
                tempCtx.drawImage(canvas, 0, 0);

                const link = document.createElement('a');
                link.download = `pixel-art-${Date.now()}.png`;
                link.href = tempCanvas.toDataURL('image/png');
                link.click();// 模拟点击链接，触发下载
                showNotification('作品已保存！');// 显示通知，提示保存成功
            } catch (error) {
                showNotification('保存失败: ' + error.message, true);
            }
        }

        // 清空画布
        function clearCanvas() {
            if (confirm('确定要清空画布吗？')) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);// 清除画布
                drawGrid();// 重绘背景
                showNotification('画布已清空'); // 显示通知，提示画布已清空
                undoStack = [];// 清空撤销栈
                initialState = canvas.toDataURL();
            }
        }

        // 重做
        function czCanvas() {
            if (confirm('确定重做吗？')) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawGrid();
                showNotification('画布已清空');
                undoStack = [];
                initialState = canvas.toDataURL();
            }
        }

        // 加载模板功能
        function loadTemplate() {
            // 创建模板选择对话框
            const dialog = document.createElement('div');
            dialog.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: white;
                padding: 30px;
                border: 2px solid #333;
                border-radius: 10px;
                z-index: 100;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
                width: 80%;
                max-width: 800px;
                max-height: 80vh;
                overflow-y: auto;
            `;

            dialog.innerHTML = `
                <h3 style="margin-top: 0; text-align: center;">选择模板</h3>
                <div id="templates-container" style="display: flex; flex-wrap: wrap; justify-content: center;">
                    ${templates.map((template, i) => `
                        <div class="template-preview" data-index="${i}">
                            <canvas width="${template.data[0].length * 10}" height="${template.data.length * 10}"></canvas>
                            <div style="text-align: center;">${template.name}</div>
                        </div>
                    `).join('')}
                </div>
                <div style="text-align: center; margin-top: 20px;">
                    <button class="action-btn" onclick="this.parentNode.parentNode.remove()">取消</button>
                </div>
            `;

            document.body.appendChild(dialog);

            // 渲染模板预览
            templates.forEach((template, i) => {
                const canvasEl = dialog.querySelector(`.template-preview[data-index="${i}"] canvas`);
                const ctx = canvasEl.getContext('2d');
                const pixelSize = canvasEl.width / template.data[0].length;

                ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);

                template.data.forEach((row, y) => {
                    row.forEach((cell, x) => {
                        if (cell) {
                            ctx.fillStyle = template.color || '#000000';
                            ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
                        }
                    });
                });

                // 添加点击事件
                canvasEl.parentNode.addEventListener('click', () => {
                    selectedTemplate = template;
                    isPlacingTemplate = true;// 设置正在绘制状态为 true
                    canvas.style.cursor = 'crosshair';
                    dialog.remove();
                    showNotification('请在画布上选择放置位置');
                });
            });
        }

        // 放置模板（最终版 - 完全不干扰现有内容）
        function placeTemplate(e) {
            // 计算放置位置
            const pos = getMousePos(e);
            const startX = pos.x;
            const startY = pos.y;

            // 保存当前颜色和状态
            const originalColor = currentColor;
            const originalGlobalAlpha = ctx.globalAlpha;

            // 直接绘制模板（完全不清理画布）
            ctx.globalAlpha = 1; // 确保不透明
            const actions = [];
            selectedTemplate.data.forEach((row, y) => {
                row.forEach((cell, x) => {
                    if (cell) {
                        ctx.fillStyle = selectedTemplate.color || currentColor;
                        // 直接绘制像素（使用原有drawPixel函数）
                        drawPixel(startX + x, startY + y);
                        actions.push({ type: 'template', x: startX + x, y: startY + y, color: ctx.fillStyle });
                    }
                });
            });

            if (actions.length > 0) {
                undoStack.push(actions);
            }

            // 恢复状态
            ctx.globalAlpha = originalGlobalAlpha;
            currentColor = originalColor;
            updateCurrentColorUI();
            isPlacingTemplate = false; // 重置模板放置状态
            canvas.style.cursor = 'crosshair'; // 恢复默认光标

            showNotification(`已放置模板: ${selectedTemplate.name}`);
        }

        // 预览模板（最终版 - 完全不干扰现有内容）
        function previewTemplate(e) {
            // 创建离屏canvas用于预览
            const previewCanvas = document.createElement('canvas');
            previewCanvas.width = canvas.width;
            previewCanvas.height = canvas.height;
            const previewCtx = previewCanvas.getContext('2d');

            // 计算位置
            const pos = getMousePos(e);
            const startX = pos.x;
            const startY = pos.y;

            // 绘制半透明预览
            previewCtx.globalAlpha = 0.5;
            selectedTemplate.data.forEach((row, y) => {
                row.forEach((cell, x) => {
                    if (cell) {
                        previewCtx.fillStyle = selectedTemplate.color || currentColor;
                        previewCtx.fillRect(
                            (startX + x) * 10,
                            (startY + y) * 10,
                            10, 10
                        );
                    }
                });
            });

            // 显示预览（不影响主画布）
            ctx.drawImage(previewCanvas, 0, 0);

            // 设置定时器在下一次鼠标移动时更新预览
            setTimeout(() => {
                if (isPlacingTemplate) {
                    previewTemplate(e);
                }
            }, 50);
        }

        // 显示通知
        function showNotification(message, isError = false) {
            const notification = document.createElement('div');// 创建通知元素
            notification.classList.add('notification'); // 添加通知类名
            if (isError) {
                notification.classList.add('error'); // 如果是错误通知，添加错误类名
            }
            notification.textContent = message;// 设置通知内容
            document.body.appendChild(notification); // 将通知元素添加到页面
            // 定时移除通知元素
            setTimeout(() => {
                notification.classList.add('fadeOut');
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 2000);
        }

        // 撤销操作
        function undo() {
            if (undoStack.length > 0) {
                undoStack.pop();// 弹出最后一个操作记录
                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
                drawGrid();// 重绘背景
                // 重新执行撤销栈中的所有操作
                undoStack.forEach(actions => {
                    actions.forEach(action => {
                        switch (action.type) {
                            case 'square':
                                ctx.fillStyle = action.color;
                                ctx.fillRect(action.x, action.y, 1, 1);
                                ctx.strokeStyle = '#ddd';
                                ctx.lineWidth = 0.1;
                                ctx.strokeRect(action.x, action.y, 1, 1);
                                break;
                            case 'circle':
                                ctx.fillStyle = action.color;
                                ctx.beginPath();
                                ctx.arc(action.x + 0.5, action.y + 0.5, 0.5, 0, Math.PI * 2);
                                ctx.fill();
                                ctx.strokeStyle = '#ddd';
                                ctx.lineWidth = 0.1;
                                ctx.strokeRect(action.x, action.y, 1, 1);
                                break;
                            case 'spray':
                                ctx.fillStyle = action.color;
                                ctx.fillRect(action.x, action.y, 0.3, 0.3);
                                ctx.strokeStyle = '#ddd';
                                ctx.lineWidth = 0.1;
                                ctx.strokeRect(action.x, action.y, 0.3, 0.3);
                                break;
                            case 'eraser':
                                // 根据背景类型决定恢复方式
                                if (action.bgType === 'transparent') {
                                    ctx.clearRect(action.x, action.y, 1, 1); // 透明背景直接清除
                                } else if (action.bgType === 'color') {
                                    ctx.fillStyle = action.bgColor; // 使用背景色填充
                                    ctx.fillRect(action.x, action.y, 1, 1);
                                } else { // 网格背景
                                    ctx.fillStyle = '#ffffff'; // 默认白色
                                    ctx.fillRect(action.x, action.y, 1, 1);
                                }
                                ctx.strokeStyle = '#ddd';
                                ctx.lineWidth = 0.1;
                                ctx.strokeRect(action.x, action.y, 1, 1);
                                break;
                            case 'line':
                                drawLine(action.start, action.end);
                                break;
                            case 'polygon':
                                drawPolygon(action.points);
                                break;
                            case 'template':
                                ctx.fillStyle = action.color;
                                ctx.fillRect(action.x, action.y, 1, 1);
                                ctx.strokeStyle = '#ddd';
                                ctx.lineWidth = 0.1;
                                ctx.strokeRect(action.x, action.y, 1, 1);
                                break;
                        }
                    });
                });
            }
        }

        // 重做操作
        function redo() {
            czCanvas();
        }

        // 初始化画布
        initCanvas();
    </script>
</body>

</html>